<script setup>

import { ref } from 'vue';
import axios from 'axios';

// 
const list = ref([]);
const newMessage = ref('');
let session_id;


async function callDashScope(prompt) {
    // 若没有配置环境变量，可用百炼API Key将下行替换为：apiKey='sk-xxx'。但不建议在生产环境中直接将API Key硬编码到代码中，以减少API Key泄露风险。
    const apiKey = 'sk-5dc115b1fae242b09c5097ee818b41c6';
    const appId = '31ed5825c37749d094c09187b953a10e';// 替换为实际的应用 ID

    const url = `https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`;

    const data = {
        input: {
            prompt: prompt,
            session_id: session_id
        },
        parameters: {},
        debug: {}
    };

    try {
        const response = await axios.post(url, data, {
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            }
        });

        if (response.status === 200) {

          addMessage(response.data.output.text, 'ai');
          
          session_id = response.data.output.session_id;
            console.log(`${response.data.output.text}`);
            console.log(`session_id=${response.data.output.session_id}`);
        } else {
            console.log(`request_id=${response.headers['request_id']}`);
            console.log(`code=${response.status}`);
            console.log(`message=${response.data.message}`);
        }
    } catch (error) {
        console.error(`Error calling DashScope: ${error.message}`);
        if (error.response) {
            console.error(`Response status: ${error.response.status}`);
            console.error(`Response data: ${JSON.stringify(error.response.data, null, 2)}`);
        }
    }
}

function addMessage(text, type) {
  list.value.push({
    time: new Date(),
    data: text,
    type: type
  });
}

function sendMessage() {
  const message = newMessage.value;
  if (!message) {
    return;
  }

  newMessage.value = '';

  addMessage(message, 'my');

  callDashScope(message);
}


</script>

<template>
  <div class="app-container">
    <div class="chatbox">
      <div class="message-container">
        <div class="chat-row" v-for="message in list">
          <div class="ai-message" v-if="message.type=== 'ai'">
            <img src="./assets/robot.png">
            <div class="bubble">
              {{ message.data }}
            </div>
            
          </div>
          <div class="my-message" v-if="message.type=== 'my'">
            <img src="./assets/me.png">
            <div class="bubble">
              {{ message.data }}
            </div>
            
          </div>
        </div>
      </div>
      <div class="input-div">
        <div class="message-input">
          <input v-model="newMessage" @keydown.enter="sendMessage">
        </div>
        <div>
          <button @click="sendMessage">发送</button>
        </div>
         
      </div>
    </div>
  </div>
  
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
